<template>
	<div class="nav-bar">
		<div v-if="webConfigStore.layout.shrink && webConfigStore.layout.menuCollapse" class="unfold">
			<icon :color="webConfigStore.getColorVal('menuActiveColor')" name="fa fa-indent" size="18"
			      style="cursor: pointer" @click="onMenuCollapse"/>
		</div>
		<NavTabs v-if="!webConfigStore.layout.shrink"/>
		<NavMenus/>
	</div>
</template>

<script lang="ts" setup>
import {useWebConfigStore} from '@/stores/modules/webConfig.store'
import NavTabs from '@/layouts/components/navBar/components/tabs.vue'
import NavMenus from './components/navMenus.vue'
import {showShade} from '@/utils/pageShadeUtil'
import Icon from '@/components/icon.vue'

const webConfigStore = useWebConfigStore()

// 小屏设备下打开菜单栏
const onMenuCollapse = () => {
	showShade('cus-aside-menu-shade', () => {
		webConfigStore.setLayout('menuCollapse', true)
	})
	webConfigStore.setLayout('menuCollapse', false)
}
</script>

<style lang="scss" scoped>
.nav-bar {
	background-color: v-bind('webConfigStore.getColorVal("headerBarBackground")');
	display: flex;
	height: 50px;
	width: 100%;

	:deep(.nav-tabs) {
		display: flex;
		height: 100%;
		position: relative;

		.nav-tab-item {
			align-items: center;
			color: v-bind('webConfigStore.getColorVal("headerBarTabColor")');
			cursor: pointer;
			display: flex;
			height: 100%;
			justify-content: center;
			padding: 0 20px;
			-webkit-transition: all 0.2s;
			transition: all 0.2s;
			user-select: none;
			z-index: 1;

			.close-icon {
				margin: 2px 0 0 4px;
				padding: 2px;
			}

			.close-icon:hover {
				background: var(--el-color-danger);
				border-radius: 50%;
				color: var(--el-border-color-extra-light) !important;
			}

			&.active {
				color: v-bind('webConfigStore.getColorVal("headerBarTabActiveColor")');
				background-color: v-bind('webConfigStore.getColorVal("headerBarTabActiveBackground")');
				box-shadow: 0 0 10px v-bind('webConfigStore.getColorVal("headerBarTabActiveColor")');
				-webkit-transition: all 0.2s;
				transition: all 0.2s;
			}

			&:hover {
				background-color: v-bind('webConfigStore.getColorVal("headerBarHoverBackground")');
				transition: all 0.3s ease;
				transform: translateY(-1px) scale(1.02);
			}
		}
	}
}

.unfold {
	align-self: center;
	padding-left: var(--cus-main-space);
}
</style>
